<template>
	<view class="act-card" @click="Info">
		<view class="activity-cover">
			<up-image
				src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=beautiful%20west%20lake%20cycling%20route%20landscape%20scenic%20view&image_size=landscape_16_9"
				width="100%" height="100%"></up-image>
			<view class="cover-overlay">
				<view class="cover-badges">
					<Tag icon="&#xe625;" name="upcoming" text="即将开始" />
					<Tag icon="&#xe8e0;" name="upcoming" text="专家" />
				</view>
				<view class="cover-info">
					<view class="participants-info">
						<view class="iconfont">&#xe626;</view>
						<view class="font-sm">10/60</view>
					</view>
					<Tag text="免费" />
				</view>
			</view>
		</view>
		<view class="activity-info">
			<view class="activity-header">
				<view class="activity-title">周末西湖环湖骑行</view>
				<view class="activity-tags">
					<Tag text="休闲" name="blue" />
					<Tag text="风景" name="blue" />
				</view>
			</view>
			<view class="activity-meta">
				<view class="meta-row">
					<view class="meta-item">
						<up-image src="/static/svg/time.svg" width="36px" height="36px"></up-image>
						<view class="meta-content">
							<view class="meta-label">时间</view>
							<view class="meta-value">2025/08/12</view>
						</view>
					</view>
					<view class="meta-item">
						<up-image src="/static/svg/address.svg" width="36px" height="36px"></up-image>
						<view class="meta-content">
							<view class="meta-label">地点</view>
							<view class="meta-value">千岛湖</view>
						</view>
					</view>
				</view>
				<view class="meta-row">
					<view class="meta-item">
						<up-image src="/static/svg/distance.svg" width="36px" height="36px"></up-image>
						<view class="meta-content">
							<view class="meta-label">距离</view>
							<view class="meta-value">20km</view>
						</view>
					</view>
					<view class="meta-item">
						<up-image src="/static/svg/number.svg" width="36px" height="36px"></up-image>
						<view class="meta-content">
							<view class="meta-label">人数</view>
							<view class="meta-value">12/20</view>
						</view>
					</view>
				</view>
			</view>
			<view class="leader-info">
				<image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=middle%20aged%20man%20cycling%20guide%20avatar%20portrait&image_size=square"
					class="leader-avatar" />
				<view class="leader-details">
					<view class="leader-name">老王</view>
					<Tag text="专家骑士" name="expert" />
				</view>
				<up-image src="/static/svg/right.svg" width="32px" height="32px"></up-image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Tag from '@/components/Tag.vue';
	
	const Info = ()=>{
		uni.navigateTo({
			url: '/subPackages/activity/Info'
		})
	}
</script>

<style lang="less" scoped>
	.act-card {
		margin-bottom: 1rem;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 20px;
		cursor: pointer;
		position: relative;
		background: linear-gradient(135deg, rgb(255, 255, 255), rgb(248, 250, 252));
		border-radius: 20px;
		overflow: hidden;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(255, 255, 255, 0.2);
		border-image: initial;
		transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

		&::before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			opacity: 0;
			pointer-events: none;
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
			transition: opacity 0.3s;
		}


		.activity-cover {
			position: relative;
			height: 220px;
			overflow: hidden;
			background: linear-gradient(45deg, rgb(102, 126, 234), rgb(118, 75, 162));

			.cover-overlay {
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
				padding: 16px;

				.cover-badges {
					display: flex;
					align-items: flex-start;
					gap: 8px;
				}

				.cover-info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.participants-info {
						display: flex;
						align-items: center;
						color: rgb(255, 255, 255);
						font-size: 14px;
						font-weight: 500;
						backdrop-filter: blur(10px);
						gap: 6px;
						background: rgba(0, 0, 0, 0.3);
						padding: 6px 12px;
						border-radius: 16px;
					}
				}
			}
		}

		.activity-info {
			padding: 20px;
			background: linear-gradient(135deg, rgb(255, 255, 255), rgb(248, 250, 252));

			.activity-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 16px;

				.activity-title {
					font-size: 18px;
					font-weight: 700;
					color: rgb(31, 41, 55);
					line-height: 1.4;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin: 0px 12px 0px 0px;
					overflow: hidden;
					flex: 1 1 0%;
				}

				.activity-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 8px;
				}
			}

			.activity-meta {
				display: flex;
				flex-direction: column;
				margin-bottom: 20px;
				gap: 12px;

				.meta-row {
					display: flex;
					gap: 16px;

					.meta-item {
						display: flex;
						align-items: center;
						gap: 12px;
						flex: 1 1 0%;
						padding: 12px;
						background: linear-gradient(135deg, rgb(248, 250, 252), rgb(226, 232, 240));
						border-radius: 12px;
						border-width: 1px;
						border-style: solid;
						border-color: rgba(148, 163, 184, 0.1);
						border-image: initial;
						transition: 0.3s;

						.meta-content {
							min-width: 0px;
							flex: 1 1 0%;

							.meta-label {
								font-size: 10px;
								color: rgb(100, 116, 139);
								font-weight: 500;
								margin-bottom: 4px;
							}

							.meta-value {
								font-size: 12px;
								color: rgb(30, 41, 59);
								font-weight: 600;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}
						}
					}
				}
			}

			.leader-info {
				display: flex;
				align-items: center;
				position: relative;
				gap: 12px;
				padding: 16px;
				background: linear-gradient(135deg, rgb(241, 245, 249), rgb(226, 232, 240));
				border-radius: 16px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(148, 163, 184, 0.2);
				border-image: initial;
				transition: 0.3s;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					top: 0px;
					left: 0px;
					right: 0px;
					bottom: 0px;
					opacity: 0;
					background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
					transition: opacity 0.3s;
				}

				.leader-avatar {
					width: 44px;
					height: 44px;
					object-fit: cover;
					box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
					position: relative;
					z-index: 1;
					border-radius: 12px;
					border-width: 2px;
					border-style: solid;
					border-color: rgba(255, 255, 255, 0.8);
					border-image: initial;
					transition: transform 0.3s;
				}

				.leader-details {
					min-width: 0px;
					position: relative;
					z-index: 1;
					flex: 1 1 0%;

					.leader-name {
						font-weight: 600;
						color: rgb(30, 41, 59);
						font-size: 14px;
						margin-bottom: 4px;
						display: block;
					}
				}
			}

		}
	}
</style>